<html>
<head>
    <title>页面推送测试</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script type="text/javascript">
        $(function () {

            var conn;
            var shopId = $("#input-shopId");
            var shopName = $("#input-shopName");

            var log = $("#log");

            function appendLog(msg) {
                var d = log[0]
                var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
                msg.appendTo(log)
                if (doScroll) {
                    d.scrollTop = d.scrollHeight - d.clientHeight;
                }
            }

            $("#form").submit(function () {

                if (!conn) {
                    return false;
                }


                var message = "{\"Table\":\"\",\"ShopId\":\"" + shopId.val() + "\",\"ShopName\":\"" + shopName.val() + "\", \"Content\":\"\", \"MessageType\":0,\"RingType\":0}"

                conn.send(message);

                return false
            });

            if (window["WebSocket"]) {


                conn = new WebSocket("ws://10.12.25.66:8888");


                conn.onclose = function (evt) {
                    appendLog($("<div><b>Connection Closed.</b></div>"))
                }

                conn.onmessage = function (evt) {

                    var msg = jQuery.parseJSON(evt.data);


                    if (msg.succ) {


                        switch (msg.data.messageType) {
                            case 0:
                                var str = msg.data.shopName + "  注册成功  shopId:" + msg.data.shopId

                                appendLog($("<div/>").text(str))
                                break
                            case 1:

                                appendLog($("<div/>").text("注销成功"))
                                break
                            case 2:


                                appendLog($("<div/>").text(msg.data.table + "--呼叫服务:" + msg.data.ringContent))


                                var audio = document.getElementById('music');
                                audio.src = msg.data.url

                                var index = 0;

                                audio.addEventListener('ended', function () {
                                    // Wait 500 milliseconds before next loop

                                    setTimeout(function () {
                                        if (index < 2) {
                                            audio.src = msg.data.url
                                            audio.play();
                                            index++
                                        }
                                    }, 500);
                                }, false);

                                audio.play();

                                break
                        }


                    }


                }
            } else {
                appendLog($("<div><b>WebSockets Not Support.</b></div>"))
            }
        });
    </script>
    <style type="text/css">
        html {
            overflow: hidden;
        }

        body {
            overflow: hidden;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            background: gray;
        }

        #log {
            background: white;
            margin: 0;
            padding: 0.5em 0.5em 0.5em 0.5em;
            position: absolute;
            top: 0.5em;
            left: 0.5em;
            right: 0.5em;
            bottom: 3em;
            overflow: auto;
        }

        #form {
            padding: 0 0.5em 0 0.5em;
            margin: 0;
            position: absolute;
            bottom: 1em;
            left: 0px;
            width: 100%;
            overflow: hidden;
        }

    </style>
</head>
<body>

<div style="visibility:hidden" id="txt-shopId"></div>

<div id="log"></div>

<form id="form">
    <input type="submit" value="连接"/>
    <input type="text" id="input-shopId" placeholder="店铺Id" size="64"/>
    <input type="text" id="input-shopName" placeholder="店铺Name" size="64"/>
</form>


<!--<audio src="/static/voice/song.ogg"   id="music" hidden />-->
<audio autoplay="autoplay" id="music" hidden preload="none">
    <source type="audio/ogg">
</audio>

</body>
</html>
